<!--
 * @Author: yantong 11608542+yan_tongone@user.noreply.gitee.com
 * @Date: 2023-01-05 15:42:45
 * @LastEditors: yantong 11608542+yan_tongone@user.noreply.gitee.com
 * @LastEditTime: 2023-01-06 13:47:01
 * @FilePath: \vue-admin-template-master\src\views\employees\Detail.vue
 * @Description: 
-->
<!--  -->
<template>
  <div class="detail-box">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账号设置" name="first">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 姓名 -->
            <el-form-item label="姓名" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码" prop="password2">
              <el-input v-model="ruleForm.password2" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveUser"
                >更新</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second"> 
            <user-info :detailId="id"></user-info>
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
          <position-information :detailId="id"></position-information>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getUserDetailById,  } from "@/api/user";
import {saveUserDetailById} from '@/api/employees'
import UserInfo from './component/UserInfo.vue';
import PositionInformation from './component/PositionInformation.vue';
export default {
  name: "Com",
  data() {
    return {
      activeName: "first",
      ruleForm: {
        username: "",
        password2: "",
      },

      rules: {
        username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password2: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
      },
      id: "", //传递过来的id
      loading: false,
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getUserDetailById();
  },
  components: {UserInfo, PositionInformation},

  computed: {},

  mounted() {},

  methods: {
    // 进行保存用户信息，进行更新

    async getUserDetailById() {
      let res = await getUserDetailById(this.id);
      //   console.log(res,"res");
      this.ruleForm = res;
    },
    async saveUser() {
      try {
        // 校验
        await this.$refs.ruleForm.validate();
        await saveUserDetailById({
          ...this.ruleForm,
          password: this.ruleForm.password2,
        }); // 将新密码的值替换原密码的值
        this.$message.success("保存成功");
      } catch (error) {
        console.log(error);
      }
    },
  },
  watch: {},
  mixins: [],
};
</script>
<style scoped lang="scss">
.detail-box {
  padding: 20px;
  box-sizing: border-box;
}

.el-form-item {
  width: 500px;
}
</style>
